<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.clearFix::after{
			content: "";
			clear: both;
			display: block;
		}
		.f{
			float: left;
		}
		a{
			text-decoration: none;
		}
		.box{
			width: 100%;
			
		}
		.header{
			width: 1000px;
			height: 80px;
			margin: 0 auto;

			padding: 15px 0;

		}
		.header>a{
			width: 56px;
			height: 56px;
			float: left;
			margin-top: 13px;
			background-size: 56px;
			background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png");
		}
		.nav{
			float: left;
/*			height: 36px;*/
			line-height: 36px;
			margin-left: 80px;
		}
		.nav>a{
			color: black;
			margin: 0 10px;
			line-height: 80px;
		}
		.nav a:hover{
			color: red;
		}
		.two-box{
			width: 1226px;
			margin: 0 auto;
			position: absolute;
			top: 100px;
			right: 50px;
			display: none;
		}
		.two-only{
			padding: 35px 12px 0;
			margin: 0 auto;
			float: left;
/*			display: none;*/
		}
		.two-only img{
			width: 160px;
			height: 110px;
		}
		.two-only a{
			color: orange;
		}
		.nav>div{
			height: 80px;
			padding: 0 10px;
		}
		.c{
			float: left;
		}
		.c:hover .two-box{
			display: block;
		}
		
		.nav>div>a{
			color: black;
		}
	</style>
</head>
<body>

	<div class="box">
		<div class="header">
			<a href=""></a>
			<div class="nav">
				<div class="o f">
				<a href="">全部商品分类</a>
				</div>

			<div class="c f" clearFix>
				<a class="b" href="">小米手机</a>

				<div class="two-box clearFix">

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8059e5c1decb3331d95c65b28e016ef5.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
			</div>

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ccb333fb5e8dae8ea011e8e968b05627.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
			</div>

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f8998aa3a4673cf5422675301f8506fe.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
			</div>

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c5728efe6a6ca16912c1ed60487a7447.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
			</div>

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0acdc0fc97f894fc1c698522e8e1cc9.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
			</div>

			<div class="two-only">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3fd13de87bcd8755fdbb804bfba467a.png?thumb=1&w=240&h=165&f=webp&q=90">
				<p>Xiaomi  Mix Flip2</p>
				<a href="">5999元起</a>
				</div>

			</div>
				</div>
				<div class="o f">
				<a href="">REDML手机</a>
				</div>
				<div class="o f">
				<a href="">电视</a>
				</div>
				<div class="o f">
				<a href="">笔记本</a>
				</div>
				<div class="o f">
				<a href="">平板</a>
				</div>
				<div class="o f">
				<a href="">家电</a>
				</div>
				<div class="o f">
				<a href="">路由器</a>
				</div>
				<div class="o f">
				<a href="">服务中心</a>
				</div>
				<div class="o f">
				<a href="">社区</a>
				</div>
			</div>
		</div>


		<!-- <div class="two"> -->

			
		<!-- </div> -->
		


	</div>



</body>
</html>





<!-- overflow:hidden   超出的部分隐藏 -->